<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { sendServiceData } from '../../common/service'
import { loginSystemApi, queryCodeImgApi } from '../../common/service/api/userApi'
import { useRouter } from 'vue-router'
import { resetDefaultRoute } from '../../router'
import { appState, initUserLoginInfo } from '../../common/manager/appManager'
import { Base64 } from 'js-base64'
import {popMessage} from "../../common/utils/normalUtils";


const state = reactive({
  sysName: appState.config.name,
  sysNameType: appState.config.sys,
  remCatch: true,
  send: {
    username: '',
    password: '',
    code: '',
    uuid: ''
  },
  // temp?-----------------------------
  error: {
    username: '',
    password: '',
    code: ''
  },
  imgLoading: false,
  isLoading: false,
  imageSource: ''
})

const router = useRouter()


/**
 * 登录处理
 */
const loginHandler = async () => {
    //验证表达
    if (!validForm()) return
    //登录请求
    const send = {...state.send}
    const result = await sendServiceData(loginSystemApi, send, state)
    // 初始化用户信息
    initUserLoginInfo({
        userName: send.username,
        userId: result.userId,
        token: result.token
    })
    // 调整默认或缓存页面
    resetDefaultRoute(appState.defaultRoute)
    // 记住登录信息
    if (state.remCatch) catchUserPwd()
    else clearUserPwd()
}

const validForm = ()=> {
    const {username, password, code} = state.send
    Object.assign(state.error, {
        username: '',
        password: '',
        code: ''
    })
    if (!username) {
        popMessage("请输入用户名")
        return false
    }
    if (!password) {
        popMessage("请输入密码")
        return false
    }
    if (!code) {
        popMessage("请输入验证码")
        return false
    }
    return true
}

/**
 * 记住登录信息
 */
const catchUserPwd = () => {
    // 简单base64存下 不加密了
    const { username, password } = state.send
    const name = Base64.toBase64(username)
    const info = String(name.length + 'AF' + name) + Base64.toBase64(password)
    localStorage.setItem('_c_uu_f', Base64.toBase64(info))
}

/**
 * 清除
 */
const clearUserPwd = () => {
    localStorage.removeItem('_c_uu_f')
}

/**
 * 初始化登录信息
 */
const initUserPwd = () => {
  let info = localStorage.getItem('_c_uu_f')
  if (!info) return
    info = Base64.fromBase64(info)
    const index = info.indexOf('AF')
    if (index < 1) return
    const len = parseInt(info.substring(0, index))
    if (isNaN(len)) return
    info = info.substring(index + 2, info.length)
    const username = Base64.fromBase64(info.substring(0, len))
    const password = Base64.fromBase64(info.substring(len, info.length))
    Object.assign(state.send, {
        username,
        password
    })
}

/**
 * 查询验证码
 */
const queryCodeImg = async () => {
    const result = await sendServiceData(queryCodeImgApi, {}, state)
    state.send.uuid = result.uuid
    state.imageSource = 'data:image/gif;base64,' + result.img
}

// 初始化
onMounted(() => {
    // 读取缓存
    initUserPwd()
    // 查询验证码
    queryCodeImg()
})

</script>

<template>
  <div class="login-container">
    <img class="login-back" :src="'./assets/login/loginBg3.jpg'" />

    <!--登录框-->
    <div class="login-content">
      <div class="login-box">
        <div class="login-img">
          <img class="login-form-bg" :src="'./assets/login/loginMain3.jpg'" />
        </div>

        <div class="login-form-box">
          <!--          <div v-if="state.sysNameType" class="title-0">-->
          <!--            {{ state.sysNameType }}-->
          <!--          </div>-->
          <div class="title-1">
            {{ state.sysName }}
          </div>

          <div class="form-box">
            <div class="form-item">
              <div class="input-form">
                <v-icon icon="yonghu1" class="icon-box" />
                <input v-model="state.send.username"
                       placeholder="请输入用户名"
                       @keydown.enter="loginHandler" />
              </div>
            </div>

            <div class="form-item">
              <div class="input-form">
                <v-icon icon="mima" class="icon-box" />
                <input v-model="state.send.password"
                       placeholder="请输入密码"
                       type="password"
                       @keydown.enter="loginHandler" />
              </div>
            </div>

            <div class="form-item">
              <div class="input-form">
                <v-icon icon="yanzhengma" class="icon-box" />
                <input v-model="state.send.code"
                       placeholder="请输入验证码"
                       @keydown.enter="loginHandler" />
                <div class="img-box" @click="queryCodeImg">
                  <v-loading v-if="state.imgLoading" size="small" />
                  <img :src="state.imageSource" />
                </div>
              </div>
            </div>

            <div class="form-item">
              <el-checkbox v-model="state.remCatch">
                记住用户名密码
              </el-checkbox>
            </div>

            <div class="form-bottom">
              <div class="login-button" @click="loginHandler">
                登录
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>

.login-container {
  @include abs-group();

  .login-back {
    @include abs-group() ;
    width:100%;
    height:100%;
  }

  .login-content {
    @include abs-group();
    @include hor-group(center, center);

    .login-box {
      @include hor-group();
      width: 9.6rem;
      height: 6rem;
      background: #fff;

      .login-img {
        flex: none;
        width: 5.3rem;
        height: 100%;
        overflow: hidden;
        position:relative;

        .login-form-bg {
          width: 100%;
          height: 100%;
        }
        .login-logo{
          position:absolute;
          width:.60rem;
          left:20px;
          top:20px;
        }
      }

      .login-form-box {
        @include ver-group(center) ;
        flex: auto;
        width: 100%;
        height: 100%;
        padding-top: .88rem;
        box-sizing: border-box;

        .login-box-bg {
          @include abs-group();
        }

        .title-0 {
          flex: none;
          width: 100%;
          font-size: .24rem;
          font-weight: 400;
          line-height: .33rem;
          letter-spacing: 2px;
          text-align: center;
          font-family: PingFangSC-Regular, PingFang SC;
        }

        .title-1 {
          flex: none;
          width: 100%;
          margin-top: .15rem;
          font-size: .48rem;
          line-height: .67rem;
          letter-spacing: 2px;
          text-align: center;
          font-family: Helvetica;
        }

        .form-box {
          flex: none;
          width: 100%;
          //margin-top: .6rem;
          margin-top: .8rem;
          padding: 0 .82rem;
          box-sizing: border-box;

          .form-item {
            @include hor-group();
            flex: none;
            width: 100%;
            padding-bottom: .25rem;
            box-sizing: border-box;
            .input-form {
              @include hor-group();
              width: 100%;
              height: .32rem;
              background: #edeff4;
              border-radius: 3px;
              overflow: hidden;

              .icon-box {
                @include hor-group(center);
                flex: none;
                width: .42rem;

                .icon-input {
                  flex: none;
                  color: #535355;
                  font-size: .15rem;
                }
              }

              input {
                @include trans-input();
                flex: auto;
                width: 100%;
                height: .32rem;
                line-height: .32rem;
                padding: 0 .15rem 0 .05rem;
                box-sizing: border-box;
                color: #292929;
                text-align: left;
              }

              .img-box {
                @include hor-group(center);
                flex: none;
                width: .95rem;
                height:100%;
                overflow: hidden;
                position:relative;

                img {
                  width:.97rem;
                }
              }
            }
          }

          .form-bottom{
            @include hor-group(center) ;
            flex:none;
            width:100%;
          }
          .login-button {
            flex: none;
            width: 1.33rem;
            height: .40rem;
            background: linear-gradient(135deg, rgb(105, 141, 255) 0% , rgb(13, 76, 253) 100%);
            line-height: .40rem;
            text-align: center;
            vertical-align: middle;
            color: #fff;
            font-size: .14rem;
            cursor: pointer;
            border-radius: .2rem;
          }

        }

      }


    }
  }

}

</style>
